<template>
    <view>
        <!-- 导航栏 -->
        <navigationBar :bgType="3" navigationTitle="游玩" />
        <view
            class="wrap tabBar-height"
            :style="'padding-top:calc(' + navigationHeight + 'px + 45px);'"
        >
            <image class="wrap-bg" :src="imageURL + 'common/top_bg.png'" mode="widthFix"></image>
            <!-- 搜索 -->
            <view class="shopping_search flex align-center" @click="tieo">
                <u-icon name="search" color="#999"></u-icon>
                <input
                    class="search_input f-26"
                    type="text"
                    placeholder="请输入关键字"
                    disabled="true"
                />
                <view class="search_btn f-26">搜索</view>
            </view>
            <!-- 轮播图 -->
            <view class="shopping_banner">
                <swiper
                    :circular="true"
                    :autoplay="true"
                    :interval="3000"
                    :duration="1000"
                    :indicator-dots="true"
                    indicator-color="rgba(255, 255, 255, 0.3)"
                    indicator-active-color="#FFF"
                >
                    <block v-for="(item, index) in youwanList" :key="index">
                        <swiper-item>
                            <image class="shopping_banner_img" :src="BaseUrl + item.media"> </image>
                        </swiper-item>
                    </block>
                </swiper>
            </view>
            <view class="play_nav">
                <block v-for="(item, index) in nav_list" :key="index">
                    <view class="play_nav_item" @click="tiaoMore(index)">
                        <image class="play_nav_item_img" :src="item.image"></image>
                        <view class="play_nav_item_name">{{ item.name }}</view>
                    </view>
                </block>
            </view>
            <!-- 餐饮美食 -->
            <view class="foods">
                <view class="foods_title">
                    <view class="foods_title_name">
                        <view class="title_name_tiao1"></view>
                        <view class="title_name_text"> 餐饮美食 </view>
                    </view>
                    <view class="foods_title_more" @click="meishi">
                        <view class="foods_title_more_text">更多</view>
                        <image class="foods_title_more_img" :src="imageURL + 'shopping/more.png'">
                        </image>
                    </view>
                </view>
                <view class="foods_scroll">
                    <scroll-view scroll-x="true" class="foods_scroll_all flex">
                        <block v-for="(item, index) in foodsList" :key="index">
                            <view class="foods_cla" @click="tiaoMeishi(index, item.id)">
                                <view class="" style="">
                                    <view
                                        style="margin: 10rpx 0"
                                        :class="
                                            activeMeishi == index ? 'title-select1' : 'title-normal'
                                        "
                                    >
                                        {{ item.name }}
                                    </view>
                                    <view
                                        :class="
                                            activeMeishi == index
                                                ? 'subtitle-select1'
                                                : 'subtitle-normal'
                                        "
                                    >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <foods-list :dataList="getlist"></foods-list>
                </view>
            </view>
            <!-- 景区门票 -->
            <view class="foods">
                <view class="foods_title">
                    <view class="foods_title_name">
                        <view class="title_name_tiao2"></view>
                        <view class="title_name_text"> 景区门票 </view>
                    </view>
                    <view class="foods_title_more" @click="jingqu">
                        <view class="foods_title_more_text">更多</view>
                        <image class="foods_title_more_img" :src="imageURL + 'shopping/more.png'">
                        </image>
                    </view>
                </view>
                <view class="foods_scroll">
                    <scroll-view scroll-x="true" class="foods_scroll_all flex">
                        <block v-for="(item, index) in jingquList" :key="index">
                            <view class="foods_cla" @click="tiaoJingqu(index, item.id)">
                                <view class="" style="">
                                    <view
                                        style="margin: 10rpx 0"
                                        :class="
                                            activeJingqu == index ? 'title-select2' : 'title-normal'
                                        "
                                    >
                                        {{ item.name }}
                                    </view>
                                    <view
                                        :class="
                                            activeJingqu == index
                                                ? 'subtitle-select2'
                                                : 'subtitle-normal'
                                        "
                                    >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <foods-list :dataList="getListo"></foods-list>
                </view>
            </view>
            <!-- 景点景观 -->
            <view class="foods">
                <view class="foods_title">
                    <view class="foods_title_name">
                        <view class="title_name_tiao3"></view>
                        <view class="title_name_text"> 景点景观 </view>
                    </view>
                    <view class="foods_title_more" @click="jingdian">
                        <view class="foods_title_more_text">更多</view>
                        <image class="foods_title_more_img" :src="imageURL + 'shopping/more.png'">
                        </image>
                    </view>
                </view>
                <view class="foods_scroll">
                    <scroll-view scroll-x="true" class="foods_scroll_all flex">
                        <block v-for="(item, index) in jingdianList" :key="index">
                            <view class="foods_cla" @click="tiaoJingdian(index, item.id)">
                                <view class="" style="">
                                    <view
                                        style="margin: 10rpx 0"
                                        :class="
                                            activeJingdian == index
                                                ? 'title-select3'
                                                : 'title-normal'
                                        "
                                    >
                                        {{ item.name }}
                                    </view>
                                    <view
                                        :class="
                                            activeJingdian == index
                                                ? 'subtitle-select3'
                                                : 'subtitle-normal'
                                        "
                                    >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <foods-list :dataList="getListt"></foods-list>
                </view>
            </view>
            <!-- 游乐场所 -->
            <view class="foods">
                <view class="foods_title">
                    <view class="foods_title_name">
                        <view class="title_name_tiao4"></view>
                        <view class="title_name_text"> 游乐场所 </view>
                    </view>
                    <view class="foods_title_more" @click="changs">
                        <view class="foods_title_more_text">更多</view>
                        <image class="foods_title_more_img" :src="imageURL + 'shopping/more.png'">
                        </image>
                    </view>
                </view>
                <view class="foods_scroll">
                    <scroll-view scroll-x="true" class="foods_scroll_all flex">
                        <block v-for="(item, index) in youleList" :key="index">
                            <view class="foods_cla" @click="tiaoYoule(index, item.id)">
                                <view class="" style="">
                                    <view
                                        style="margin: 10rpx 0"
                                        :class="
                                            activeYoule == index ? 'title-select4' : 'title-normal'
                                        "
                                    >
                                        {{ item.name }}
                                    </view>
                                    <view
                                        :class="
                                            activeYoule == index
                                                ? 'subtitle-select4'
                                                : 'subtitle-normal'
                                        "
                                    >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <foods-list :dataList="getListf"></foods-list>
                </view>
            </view>
            <!-- 旅游住宿 -->
            <view class="foods">
                <view class="foods_title">
                    <view class="foods_title_name">
                        <view class="title_name_tiao5"></view>
                        <view class="title_name_text"> 旅游住宿 </view>
                    </view>
                    <view class="foods_title_more" @click="lvyou">
                        <view class="foods_title_more_text">更多</view>
                        <image class="foods_title_more_img" :src="imageURL + 'shopping/more.png'">
                        </image>
                    </view>
                </view>
                <view class="foods_scroll">
                    <scroll-view scroll-x="true" class="foods_scroll_all flex">
                        <block v-for="(item, index) in lvyouList" :key="index">
                            <view class="foods_cla" @click="tiaoLvyou(index, item.id)">
                                <view class="" style="">
                                    <view
                                        style="margin: 10rpx 0"
                                        :class="
                                            activeLvyou == index ? 'title-select5' : 'title-normal'
                                        "
                                    >
                                        {{ item.name }}
                                    </view>
                                    <view
                                        :class="
                                            activeLvyou == index
                                                ? 'subtitle-select5'
                                                : 'subtitle-normal'
                                        "
                                    >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <foods-list :dataList="getLists"></foods-list>
                </view>
            </view>
            <!-- 设备租用 -->
            <view class="foods">
                <view class="foods_title">
                    <view class="foods_title_name">
                        <view class="title_name_tiao6"></view>
                        <view class="title_name_text"> 设备租用 </view>
                    </view>
                    <view class="foods_title_more" @click="shebei">
                        <view class="foods_title_more_text">更多</view>
                        <image class="foods_title_more_img" :src="imageURL + 'shopping/more.png'">
                        </image>
                    </view>
                </view>
                <view class="foods_scroll">
                    <scroll-view scroll-x="true" class="foods_scroll_all flex">
                        <block v-for="(item, index) in shebeiList" :key="index">
                            <view class="foods_cla" @click="tiaoShebei(index, item.id)">
                                <view class="" style="">
                                    <view
                                        style="margin: 10rpx 0"
                                        :class="
                                            activeShebei == index ? 'title-select6' : 'title-normal'
                                        "
                                    >
                                        {{ item.name }}
                                    </view>
                                    <view
                                        :class="
                                            activeShebei == index
                                                ? 'subtitle-select6'
                                                : 'subtitle-normal'
                                        "
                                    >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                    <foods-list :dataList="getListe"></foods-list>
                </view>
            </view>
        </view>
        <!-- 工具 -->
        <tool
            :showTop="isShowTop"
            :cartnum="cartnum"
            :shopCart="true"
            :kefu="kefu"
            :costomer="true"
            :showItIndex="showItIndex"
        />
        <!-- tabBar -->
        <tabBar :current="2" />
    </view>
</template>
<script>
import { getRecommendSecondCate } from "@/utils/newLive.js";
import tabBar from "@/components/tabBar/tabBar.vue";
import tool from "@/components/tool/tool.vue";
import foodsList from "@/components/foodList/foodList.vue";
import { imageURL } from "@/utils/config";
import { BaseUrl } from "../../../utils/req.js";
import { getMeishiList, getPlayGoodsList, getPlayGoodsCate } from "@/utils/play";
export default {
    components: {
        tabBar,
        tool,
        foodsList,
    },
    data() {
        return {
            kefu: {},
            type: "goods",
            imageURL,
            navigationHeight: uni.getSystemInfoSync()["statusBarHeight"],
            youwanList: [],
            nav_list: [],
            foodsList: [],
            jingquList: [],
            jingdianList: [],
            youleList: [],
            lvyouList: [],
            shebeiList: [],
            BaseUrl,
            activeMeishi: 0,
            activeJingqu: 0,
            activeJingdian: 0,
            activeYoule: 0,
            activeLvyou: 0,
            activeShebei: 0,
            MeshiId: 15,
            getlist: [],
            jingquId: 14,
            getListo: [],
            jingdianId: 13,
            getListt: [],
            youleId: 12,
            getListf: [],
            lvyouId: 11,
            getLists: [],
            shebeiId: 10,
            getListe: [],
            cartnum: 0,
            isShowTop: false,
            isShopCart: false,
            category_index: 0,
            showItIndex : 3
        };
    },
    onShow() {
        this.showItIndex = 3;
        console.log("show", this.showItIndex);
        // this.isShopCart = !this.isShopCart
        this.advertising();
        this.MeishiList();
        this.jingquLists();
        this.jingdianLists();
        this.youleLists();
        this.lvyous();
        this.shebeiLists();
        this.getCarts();
    },
    onLoad() {
        this.getKefu();
        this.getPlayGoodsCate();
        /* 获取六个大分类下面的全部选项的商品列表 */
        this.getList1();
        this.getList2();
        this.getList3();
        this.getList4();
        this.getList5();
        this.getList6();
    },
    onHide() {
        this.showItIndex = 0;
        console.log("Hide", this.showItIndex);
    },
    /**
     * 页面滑动
     */
    onPageScroll(e) {
        let distanceTop = e.scrollTop;
        if (distanceTop > 200) {
            this.isShowTop = true;
        } else {
            this.isShowTop = false;
        }
    },
    /**
     * 方法
     */
    methods: {
        getCarts() {
            this.$request.post("api/wanlshop.cart/synchro", { cart: [] }).then((res) => {
                this.cartnum = res.data.length;
                uni.setStorageSync("cartnum", this.cartnum);
            });
        },
        async getKefu() {
            const res = await getRecommendSecondCate();
            this.kefu = res.data.kefu;
            let i = this.kefu.kefu_tips.split("客服电话");
            this.kefu.kefu_tips = i[0];
            this.kefu.mobile = i[1];
        },
        async getPlayGoodsCate() {
            const res = await getPlayGoodsCate();
            this.nav_list = res.data;
        },
        /* 获取全部分类商品列表 */
        async getList1() {
            const res = await getPlayGoodsList({
                type: "goods",
                category_id: this.MeshiId,
            });
            this.getlist = res.data.data;
        },
        async getList2() {
            const res = await getPlayGoodsList({
                type: "goods",
                category_id: this.jingquId,
            });
            this.getListo = res.data.data;
        },
        async getList3() {
            const res = await getPlayGoodsList({
                type: "goods",
                category_id: this.jingdianId,
            });
            this.getListt = res.data.data;
        },
        async getList4() {
            const res = await getPlayGoodsList({
                type: "goods",
                category_id: this.youleId,
            });
            this.getListf = res.data.data;
        },
        async getList5() {
            const res = await getPlayGoodsList({
                type: "goods",
                category_id: this.lvyouId,
            });
            this.getLists = res.data.data;
        },
        async getList6() {
            const res = await getPlayGoodsList({
                type: "goods",
                category_id: this.shebeiId,
            });
            this.getListe = res.data.data;
        },
        /* 获取美食大分类下的小分类的轮播分类 */
        async MeishiList() {
            const res = await getMeishiList({
                pid: 15,
            });
            this.foodsList = res.data.data;
            let newObject = {
                id: 15,
                name: "全部",
                pid: 15,
            };
            this.foodsList.unshift(newObject);
        },
        async jingquLists() {
            const res = await getMeishiList({
                pid: 14,
            });
            this.jingquList = res.data.data;
            let newObject = {
                id: 14,
                name: "全部",
                pid: 14,
            };
            this.jingquList.unshift(newObject);
        },
        async jingdianLists() {
            const res = await getMeishiList({
                pid: 13,
            });
            this.jingdianList = res.data.data;
            let newObject = {
                id: 13,
                name: "全部",
                pid: 13,
            };
            this.jingdianList.unshift(newObject);
        },
        async youleLists() {
            const res = await getMeishiList({
                pid: 12,
            });
            this.youleList = res.data.data;
            let newObject = {
                id: 12,
                name: "全部",
                pid: 12,
            };
            this.youleList.unshift(newObject);
        },
        async lvyous() {
            const res = await getMeishiList({
                pid: 11,
            });
            this.lvyouList = res.data.data;
            let newObject = {
                id: 11,
                name: "全部",
                pid: 11,
            };
            this.lvyouList.unshift(newObject);
        },
        async shebeiLists() {
            const res = await getMeishiList({
                pid: 10,
            });
            this.shebeiList = res.data.data;
            let newObject = {
                id: 10,
                name: "全部",
                pid: 10,
            };
            this.shebeiList.unshift(newObject);
        },
        // 合作广告（轮播图）
        async advertising() {
            await uni.request({
                url: BaseUrl + "/api/wanlshop.common/adverts?zhongcao='游玩'",
                method: "GET",

                header: {
                    token: uni.getStorageSync("token"),
                },
                success: (res) => {
                    this.youwanList = res.data.data.data.youwanAdverts;
                    // this.list1 = res.data.data.data.zhongcaoAdverts
                    // this.shangjialist = res.data.data.data
                },
            });
        },
        /* 轮播图下面的六个小圆点 */
        tiaoMore(index) {
            if (index == 0) {
                this.meishi();
            } else if (index == 1) {
                this.jingqu();
            } else if (index == 2) {
                this.jingdian();
            } else if (index == 3) {
                this.changs();
            } else if (index == 4) {
                this.lvyou();
            } else if (index == 5) {
                this.shebei();
            }
        },
        /* 跳转搜索页面 */
        tieo() {
            uni.navigateTo({
                url: "/upRelease/search/search",
            });
        },
        /* 点击切换小分类的选中状态和小分类下的带图片的商品列表 */
        tiaoMeishi(index, id) {
            this.activeMeishi = index; //改变选中样式
            this.MeshiId = id;
            this.getList1({
                //重新获取新的小分类带图片商品列表
                type: "goods",
                category_id: id,
            });
        },
        tiaoJingqu(index, id) {
            this.activeJingqu = index;
            this.jingquId = id;
            this.getList2({
                type: "goods",
                category_id: id,
            });
        },
        tiaoJingdian(index, id) {
            this.activeJingdian = index;
            this.jingdianId = id;
            this.getList3({
                type: "goods",
                category_id: id,
            });
        },
        tiaoYoule(index, id) {
            this.activeYoule = index;
            this.youleId = id;
            this.getList4({
                type: "goods",
                category_id: id,
            });
        },
        tiaoLvyou(index, id) {
            this.activeLvyou = index;
            this.lvyouId = id;
            this.getList5({
                type: "goods",
                category_id: id,
            });
        },
        tiaoShebei(index, id) {
            this.activeShebei = index;
            this.shebeiId = id;
            this.getList6({
                type: "goods",
                category_id: id,
            });
        },
        // 餐饮美食
        meishi() {
            uni.navigateTo({
                url: "/dabai/pages/delicacies/delicacies?pid=15",
            });
        },
        lvyou() {
            uni.navigateTo({
                url: "/dabai/pages/delicacies/delicacies?pid=11",
            });
        },
        jingqu() {
            uni.navigateTo({
                url: "/dabai/pages/delicacies/delicacies?pid=14",
            });
        },
        // 设备
        shebei() {
            uni.navigateTo({
                url: "/dabai/pages/delicacies/delicacies?pid=10",
            });
        },
        // 场所
        changs() {
            uni.navigateTo({
                url: "/dabai/pages/delicacies/delicacies?pid=12",
            });
        },
        // 景点
        jingdian() {
            uni.navigateTo({
                url: "/dabai/pages/delicacies/delicacies?pid=13",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0 25rpx;
    box-sizing: border-box;

    .wrap-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    .shopping_search {
        padding-left: 18rpx;
        margin-top: 10rpx;
        width: 700rpx;
        height: 62rpx;
        background-color: white;
        border-radius: 50rpx;
        overflow: hidden;

        .search_input {
            margin-left: 20rpx;
            flex: 1;
            color: $place-color;
        }

        .search_btn {
            width: 115rpx;
            height: 54rpx;
            line-height: 54rpx;
            text-align: center;
            color: white;
            background: linear-gradient(90deg, #00a67a, #057748);
            margin-right: 5rpx;
            border-radius: 27rpx;
            overflow: hidden;
        }
    }

    .shopping_banner {
        margin-top: 20rpx;
        width: 700rpx;
        height: 330rpx;
        border-radius: 20rpx;
        overflow: hidden;

        .shopping_banner_img {
            width: 700rpx;
            height: 330rpx;
        }
    }

    .play_nav {
        margin-top: 15rpx;
        width: 700rpx;
        height: 380rpx;
        padding: 25rpx 15rpx 15rpx;
        background-color: white;
        border-radius: 16rpx;
        overflow: hidden;
        flex-wrap: wrap;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

        .play_nav_item {
            width: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            margin-bottom: 20rpx;

            .play_nav_item_img {
                width: 92rpx;
                height: 92rpx;
            }

            .play_nav_item_name {
                margin-top: 15rpx;
                color: $title-color;
            }
        }
    }

    .foods {
        width: 700rpx;
        height: 600rpx;
        // border: 1px solid red;

        .foods_title {
            width: 700rpx;
            height: 100rpx;
            line-height: 100rpx;
            display: flex;

            .foods_title_name {
                width: 600rpx;
                padding-left: 20rpx;
                display: flex;
                align-items: center;

                .title_name_tiao1 {
                    width: 10rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                    background: linear-gradient(90deg, #ffde82, #ff9800);
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                }

                .title_name_tiao2 {
                    width: 10rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                    background: linear-gradient(90deg, #ffde82, #ff9800);
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                }

                .title_name_tiao3 {
                    width: 10rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                    background: linear-gradient(90deg, #afe3ff, #478fff);
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                }

                .title_name_tiao4 {
                    width: 10rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                    background: linear-gradient(90deg, #72d7cc, #28cfb3);
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                }

                .title_name_tiao5 {
                    width: 10rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                    background: linear-gradient(90deg, #fb96a5, #f74161);
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                }

                .title_name_tiao6 {
                    width: 10rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                    background: linear-gradient(90deg, #7683d9, #d8a0fe);
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                }

                .title_name_text {
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #121212;
                }
            }

            .foods_title_more {
                width: 100rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .foods_title_more_text {
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #666666;
                }

                .foods_title_more_img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 5rpx;
                }
            }
        }

        .foods_scroll {
            border-radius: 16rpx;
            width: 100%;
            height: 500rpx;
            overflow: hidden;
            background: #fff;

            .foods_scroll_all {
                width: 100%;
                height: 90rpx;
                line-height: 80rpx;
                overflow: hidden;
                white-space: nowrap;

                .foods_cla {
                    display: inline-block;
                    height: 80rpx;
                    width: 180rpx;
                    text-align: center;
                }
            }
        }
    }
}

.title-select1 {
    font-size: 30rpx;
    color: #fc8127;
}

.title-select2 {
    font-size: 30rpx;
    color: #ffa213;
}

.title-select3 {
    font-size: 30rpx;
    color: #7ab0ff;
}

.title-select4 {
    font-size: 30rpx;
    color: #32d0b6;
}

.title-select5 {
    font-size: 30rpx;
    color: #f84d6a;
}

.title-select6 {
    font-size: 30rpx;
    color: #8487de;
}

.title-normal {
    font-size: 30rpx;
    color: #666666;
}

.subtitle-select1 {
    margin: 0 75rpx;
    width: 30rpx;
    height: 6rpx;
    background: linear-gradient(90deg, #f9d5c4, #fd7410);
    border-radius: 3rpx;
}

.subtitle-select2 {
    margin: 0 75rpx;
    width: 30rpx;
    height: 6rpx;
    background: linear-gradient(90deg, #ffde82, #ff9800);
    border-radius: 3rpx;
}

.subtitle-select3 {
    margin: 0 75rpx;
    width: 30rpx;
    height: 6rpx;
    background: linear-gradient(90deg, #afe3ff, #478fff);
    border-radius: 3rpx;
}

.subtitle-select4 {
    margin: 0 75rpx;
    width: 30rpx;
    height: 6rpx;
    background: linear-gradient(90deg, #72d7cc, #28cfb3);
    border-radius: 3rpx;
}

.subtitle-select5 {
    margin: 0 75rpx;
    width: 30rpx;
    height: 6rpx;
    background: linear-gradient(90deg, #fb96a5, #f74161);
    border-radius: 3rpx;
}

.subtitle-select6 {
    margin: 0 75rpx;
    width: 30rpx;
    height: 6rpx;
    background: linear-gradient(90deg, #7683d9, #d8a0fe);
    border-radius: 3rpx;
}

.subtitle-normal {
}
</style>
